import React, { useState, useEffect } from 'react'
import './style.scss'
import MyTabbar from '@c/MyTabbar'
import { fetchHomeBanner, fetchCates, fetchItems } from '@/api'
import { Swiper, Grid } from 'antd-mobile'
import Icon from '@c/Icon'
import InfiniteScroll from 'react-infinite-scroll-component';
import { useNavigate,useDispatch } from 'umi'
export default function index() {
  const navigate = useNavigate();
  // 请求首页banner
  const [banners, setBanners] = useState<any[]>([]);
  const getBanner = () => {
    fetchHomeBanner().then((res: { data: { code: number; data: React.SetStateAction<never[]>; }; }) => {
      if (res.data.code === 0) {
        setBanners(res.data.data)
      }
    })
  }

  // 宫格导航 请求分类
  const [cates, setCates] = useState<any[]>([]);
  const getCates = () => {
    fetchCates().then(res => {
      if (res.data.code === 0) {
        setCates(res.data.data)
      }
    })
  }
  // 推荐商品数据处理
  const [page, setPage] = useState(1);
  const [items, setItems] = useState<any[]>([]);
  const getItems = () => {
    fetchItems({
      page,
      pageSize: 5
    }).then(res => {
      if (res.data.code === 0) {
        setItems([
          ...items,
          ...res.data.data.result
        ])
      }
      if (res.data.code === 700) {
        setHasMore(false)
      }
    })
  }
  // 上拉加载
  // 触底事件
  const reachBottom = () => {
  //  将page + 1 重新请求
    setPage(page+1)
  }
  useEffect(() => {
    getItems();
  }, [page])
  // 是否还有数据
  const [hasMore, setHasMore] = useState(true)
  useEffect(() => {
    getBanner();
    getCates();
    
  }, [])
  // 加入购物车
  const dispatch = useDispatch();
  const addCart = (goodsId: number, number: number) => {
    dispatch({
      type: 'cart/addCart',
      params: {
        goodsId,
        number
      }
    })
    
  }
  return (
    <div className='home-page'>
      <header className='home-header'>这是头部</header>
      <div className="home-container">
        {/* 轮播 */}
        <Swiper
          autoplay
          loop
        >
          {
            banners.map(banner => (
              <Swiper.Item key={banner.id}>
                <img src={banner.picUrl} />
              </Swiper.Item>
            ))
          }
        </Swiper>
        {/* /轮播 */}
        {/* 宫格导航 */}
        <Grid columns={4} gap={8}>
          {
            cates.map(cate => (
              <Grid.Item key={cate.id}>
                <div className='grid-item' onClick={
                  () => {
                    navigate('/itemLists?cateId='+cate.id)
                  }
                }>
                  <img src={cate.icon} alt="" className="icon" />
                  <span>{cate.name}</span>
                </div>
              </Grid.Item>
            ))
          }

        </Grid>
        {/* 宫格导航 */}
        {/* 推荐商品 */}
        <InfiniteScroll
          dataLength={items.length} //This is important field to render the next data
          next={reachBottom}
          hasMore={hasMore}
          loader={<h4>加载...</h4>}
          endMessage={
            <p style={{ textAlign: 'center' }}>
              <b>我也是有底线了</b>
            </p>
          }
        >
          <div className="items">
            <h5 className="title">推荐商品</h5>
            {
              items.map(item => (
                <div 
                  className="item" 
                  onClick={
                    () => {
                      navigate(`/detail/${item.id}`)
                    }
                  }
                  key={item.id}>
                  <img src={item.pic} alt="" className="item-img" />
                  <div className="item-info">
                    <h5 className="item-name">{item.name}</h5>
                    <div className="item-action">
                      <p className="price">￥{item.minPrice}</p>
                      <Icon clickIcon={
                        () => {
                          addCart(item.id, 1)
                        }
                      } stop={true} name="gouwuchetianjia" color="#e93323" size={24} />
                    </div>
                  </div>
                </div>
              ))
            }

          </div>
        </InfiniteScroll>
        {/* /推荐商品 */}
      </div>
      <MyTabbar />
    </div>
  )
}
